<template>
    <div class="article-edit">
        <el-card class="!border-none" shadow="never">
            <el-page-header :content="$route.meta.title" @back="$router.back()" />
        </el-card>
        <el-card class="mt-4 !border-none" shadow="never">
            <el-form ref="formRef" class="ls-form" :model="formData" label-width="85px" :rules="rules">
                <div class="xl:flex">
                    <div>
                        <el-form-item label="查档编号" prop="chadang_number">
                            <div class="w-80">
                                <el-input v-model="formData.chadang_number" placeholder="请输入查档编号" />
                            </div>
                        </el-form-item>
                        <el-form-item label="姓名" prop="name">
                            <div class="w-80">
                                <el-input v-model="formData.name" placeholder="请输入姓名" />
                            </div>
                        </el-form-item>
                        <el-form-item label="证件号" prop="card">
                            <div class="w-80">
                                <el-input v-model="formData.card" placeholder="请输入证件号" />
                            </div>
                        </el-form-item>
                        <el-form-item label="房1坐落" prop="fang_zuoluo">
                            <div class="w-80">
                                <el-input v-model="formData.fang_zuoluo" placeholder="请输入房1坐落" />
                            </div>
                        </el-form-item>
                        <el-form-item label="单元号" prop="number_danyuan">
                            <div class="w-80">
                                <el-input v-model="formData.number_danyuan" placeholder="请输入单元号" />
                            </div>
                        </el-form-item>
                        <el-form-item label="权利人" prop="quanli_people">
                            <div class="w-80">
                                <el-input v-model="formData.quanli_people" placeholder="请输入权利人" />
                            </div>
                        </el-form-item>
                        <el-form-item label="证件号" prop="number">
                            <div class="w-80">
                                <el-input v-model="formData.number" placeholder="请输入证件号" />
                            </div>
                        </el-form-item>
                        <el-form-item label="面积" prop="mianji">
                            <div class="w-80">
                                <el-input v-model="formData.mianji" placeholder="请输入面积" />
                            </div>
                        </el-form-item>
                        <el-form-item label="用途" prop="yonghu">
                            <div class="w-80">
                                <el-input v-model="formData.yongtu" placeholder="请输入用途" />
                            </div>
                        </el-form-item>
                        <el-form-item label="共有情况" prop="gongyouqingkuang">
                            <div class="w-80">
                                <el-input v-model="formData.gongyouqingkuang" placeholder="请输入共有情况" />
                            </div>
                        </el-form-item>
                        <el-form-item label="登记时间" prop="dengji_time">
                            <div class="w-80">
                                <el-input v-model="formData.dengji_time" placeholder="请输入登记时间" />
                            </div>
                        </el-form-item>
                        <el-form-item label="权利状态" prop="quanli_status">
                            <div class="w-80">
                                <el-input v-model="formData.quanli_status" placeholder="请输入登记信息录入机关" />
                            </div>
                        </el-form-item>
                        <el-form-item label="权利性质" prop="quanli_xingzhi">
                            <div class="w-80">
                                <el-input v-model="formData.quanli_xingzhi" placeholder="请输入权利状态" />
                            </div>
                        </el-form-item>
                        <el-form-item label="使用期限" prop="use_time">
                            <div class="w-80">
                                <el-input v-model="formData.use_time" placeholder="请输入使用期限" />
                            </div>
                        </el-form-item>
                        <el-form-item label="限制状态" prop="xianzhi_status">
                            <div class="w-80">
                                <el-input v-model="formData.xianzhi_status" placeholder="请输入限制状态" />
                            </div>
                        </el-form-item>
                        <el-form-item label="附记" prop="desc">
                            <div class="w-80">
                                <el-input v-model="formData.desc" placeholder="请输入附记" />
                            </div>
                        </el-form-item>
                        <el-form-item label="抵押权人" prop="diyaquanren">
                            <div class="w-80">
                                <el-input v-model="formData.diyaquanren" placeholder="请输入抵押权人" />
                            </div>
                        </el-form-item>
                        <el-form-item label="抵押类型" prop="diya_style">
                            <div class="w-80">
                                <el-input v-model="formData.diya_style" placeholder="请输入抵押类型" />
                            </div>
                        </el-form-item>
                        <el-form-item label="登记机构" prop="dengji_jigou">
                            <div class="w-80">
                                <el-input v-model="formData.dengji_jigou" placeholder="请输入登记机构" />
                            </div>
                        </el-form-item>
                        <el-form-item label="抵押开始" prop="diya_start_time">
                            <div class="w-80">
                                <el-input v-model="formData.diya_start_time" placeholder="请输入抵押开始时间" />
                            </div>
                        </el-form-item>
                        <el-form-item label="抵押结束" prop="diya_end_time">
                            <div class="w-80">
                                <el-input v-model="formData.diya_end_time" placeholder="请输入抵押结束时间" />
                            </div>
                        </el-form-item>
                    </div>

                </div>
            </el-form>
        </el-card>
        <footer-btns>
            <el-button type="primary" @click="handleSave">保存</el-button>
        </footer-btns>
    </div>
</template>

<script lang="ts" setup name="articleListsEdit">
import type { FormInstance } from 'element-plus'
import { useDictOptions } from '@/hooks/useDictOptions'
import { articleDetail, articleEdit, articleAdd, articleCateAll } from '@/api/realestate'
import useMultipleTabs from '@/hooks/useMultipleTabs'

const route = useRoute()
const router = useRouter()
const formData = reactive({
    cid: 0,
    id: '',
    dengji_time: '',
    number: '',
    chadang_number: '',
    card: '',//查询身份证号
    fang_zuoluo: '',
    number_danyuan: '',
    mianji: '',
    yonghu: '',
    name: '',
    gongyouqingkuang: '',
    quanli_status: '',
    quanli_xingzhi: '',
    use_time: '',
    xianzhi_status: '',
    diyaquanren: '',
    diya_style: '',
    dengji_jigou: '',
    diya_start_time: '',
    diya_end_time: '',
    desc: '',
    quanli_people: '',
    is_show: 1
})

const { removeTab } = useMultipleTabs()
const formRef = shallowRef<FormInstance>()
const rules = reactive({
    title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
    cid: [{ required: true, message: '请选择文章栏目', trigger: 'blur' }]
})

const getDetails = async () => {
    const data = await articleDetail({
        id: route.query.id
    })
    Object.keys(formData).forEach((key) => {
        //@ts-ignore
        formData[key] = data[key]
    })
}

// const { optionsData } = useDictOptions<{
//     article_cate: any[]
// }>({
//     article_cate: {
//         api: articleCateAll
//     }
// })

const handleSave = async () => {
    await formRef.value?.validate()
    if (route.query.id) {
        await articleEdit(formData)
    } else {
        await articleAdd(formData)
    }
    removeTab()
    router.back()
}

route.query.id && getDetails()
</script>
